// Element Plus 样式覆盖

// 按钮样式
.el-button {
  font-weight: 400;
  border-radius: 4px;
  transition: all 0.3s;

  &.el-button--primary {
    background: linear-gradient(135deg, var(--el-color-primary) 0%, var(--el-color-primary-dark-2) 100%);
    border-color: var(--el-color-primary);

    &:hover {
      background: var(--el-color-primary-light-3);
      border-color: var(--el-color-primary-light-3);
    }
  }
}

// 输入框样式
.el-input {
  .el-input__wrapper {
    border-radius: 4px;
    transition: all 0.3s;

    &:hover {
      border-color: var(--el-color-primary-light-3);
    }
  }

  // 前缀/后缀内容垂直居中
  .el-input__prefix,
  .el-input__suffix {
    display: inline-flex;
    align-items: center;
  }

  // 图标与文本间距
  .el-input__prefix .el-icon,
  .el-input__suffix .el-icon {
    margin: 0 4px;
  }
}

// 表格样式
.el-table {
  .el-table__header-wrapper {
    .el-table__header {
      th {
        background: var(--el-fill-color-light);
        color: var(--el-text-color-primary);
        font-weight: 500;

        .cell {
          font-size: 13px;
        }
      }
    }
  }

  .el-table__body-wrapper {
    .el-table__body {
      tr {
        transition: background-color 0.3s;

        &:hover {
          background: var(--el-fill-color-light);
        }

        td {
          .cell {
            font-size: 13px;
            line-height: 1.5;
          }
        }
      }
    }
  }

  .el-table__empty-text {
    color: var(--el-text-color-secondary);
  }
}

// 分页样式
.el-pagination {
  .el-pager {
    li {
      border-radius: 4px;
      margin: 0 2px;

      &.is-active {
        background: var(--el-color-primary);
        color: #fff;
      }
    }
  }

  .btn-prev,
  .btn-next {
    border-radius: 4px;
  }
}

// 对话框样式
.el-dialog {
  border-radius: 8px;
  overflow: hidden;

  .el-dialog__header {
    background: var(--el-fill-color-light);
    padding: 16px 20px;
    border-bottom: 1px solid var(--el-border-color-lighter);

    .el-dialog__title {
      font-size: 16px;
      font-weight: 500;
    }
  }

  .el-dialog__body {
    padding: 20px;
  }

  .el-dialog__footer {
    padding: 12px 20px;
    background: var(--el-fill-color-light);
    border-top: 1px solid var(--el-border-color-lighter);
    text-align: right;
  }
}

// 抽屉样式
.el-drawer {
  .el-drawer__header {
    background: var(--el-fill-color-light);
    padding: 16px 20px;
    border-bottom: 1px solid var(--el-border-color-lighter);
    margin-bottom: 0;

    .el-drawer__title {
      font-size: 16px;
      font-weight: 500;
    }
  }

  .el-drawer__body {
    padding: 20px;
  }
}

// 菜单样式 - 完全匹配原型设计
.el-menu {
  background: var(--sidebar-bg) !important;
  border: none !important;
  
  &.el-menu--vertical {
    .el-menu-item {
      height: 48px;
      line-height: 48px;
      padding: 0 16px !important;         // 匹配原型 px-4
      margin: 1px 0;                      // 匹配原型 space-y-1  
      border-radius: var(--sidebar-radius) !important;
      color: var(--sidebar-text) !important;
      background: transparent !important;
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
      position: relative;
      font-size: 14px !important;         // 匹配原型默认字体大小
      font-weight: 400 !important;        // 正常字重

      &:hover {
        background: var(--sidebar-bg-hover) !important;
        color: var(--sidebar-text-hover) !important;
      }

      &.is-active {
        background: var(--sidebar-bg-active) !important;
        color: var(--sidebar-text-active) !important;
        // border-right: 4px solid var(--sidebar-text-active) !important; // 暂时注释掉右边框
      }
      
      // 图标样式
      .el-icon {
        width: 20px;           // 匹配原型 w-5
        min-width: 20px;       // 确保图标不会被压缩
        text-align: center;
        margin-right: 12px;    // 匹配原型 mr-3
        color: inherit;
        font-size: 16px !important;  // 图标大小，稍大于文字
        display: inline-flex !important;  // 确保图标正常显示
        align-items: center !important;
        justify-content: center !important;
      }
      
      // 文字样式
      span {
        color: inherit;
        font-size: inherit;
        font-weight: inherit;
      }
    }

    .el-sub-menu {
      margin: 1px 0;
      
      .el-sub-menu__title {
        height: 48px;
        line-height: 48px;
        padding: 0 16px !important;
        border-radius: var(--sidebar-radius) !important;
        color: var(--sidebar-text) !important;
        background: transparent !important;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
        font-size: 14px !important;         // 匹配原型默认字体大小
        font-weight: 400 !important;        // 正常字重

        &:hover {
          background: var(--sidebar-bg-hover) !important;
          color: var(--sidebar-text-hover) !important;
        }
        
        .el-icon {
          width: 20px;
          min-width: 20px;       // 确保图标不会被压缩
          text-align: center;
          margin-right: 12px;
          color: inherit;
          font-size: 16px !important;  // 图标大小，稍大于文字
          display: inline-flex !important;  // 确保图标正常显示
          align-items: center !important;
          justify-content: center !important;
        }
      }
      
      &.is-opened > .el-sub-menu__title {
        background: var(--sidebar-bg-active) !important;
        color: var(--sidebar-text-active) !important;
      }

      .el-menu {
        background: transparent !important;
        padding: 4px 0 4px 16px;
        
        .el-menu-item {
          height: 40px;
          line-height: 40px;
          padding-left: 40px !important;
          font-size: 14px !important;       // 匹配原型默认字体大小
          font-weight: 400 !important;      // 正常字重
          
          &.is-active {
            background: var(--sidebar-bg-active) !important;
            color: var(--sidebar-text-active) !important;
            // border-right: 4px solid var(--sidebar-text-active) !important; // 暂时注释掉右边框
          }
        }
      }
    }
  }
}

// 标签页样式
.el-tabs {
  .el-tabs__header {
    margin: 0 0 16px 0;

    .el-tabs__nav-wrap {
      &::after {
        background: var(--el-border-color-lighter);
      }
    }

    .el-tabs__item {
      padding: 0 20px;
      height: 40px;
      line-height: 40px;
      font-size: 13px;
      transition: all 0.3s;

      &:hover {
        color: var(--el-color-primary);
      }

      &.is-active {
        color: var(--el-color-primary);
        font-weight: 500;
      }
    }

    .el-tabs__active-bar {
      background: var(--el-color-primary);
    }
  }
}

// 卡片样式
.el-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  transition: all 0.3s;

  &:hover {
    box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.12);
  }

  .el-card__header {
    background: var(--el-fill-color-light);
    border-bottom: 1px solid var(--el-border-color-lighter);
    padding: 16px 20px;

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .card-title {
        font-size: 16px;
        font-weight: 500;
        color: var(--el-text-color-primary);
      }
    }
  }

  .el-card__body {
    padding: 20px;
  }
}

// 消息提示样式
.el-message {
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

  &.el-message--success {
    background: var(--el-color-success-light-9);
    border: 1px solid var(--el-color-success-light-7);
  }

  &.el-message--warning {
    background: var(--el-color-warning-light-9);
    border: 1px solid var(--el-color-warning-light-7);
  }

  &.el-message--error {
    background: var(--el-color-danger-light-9);
    border: 1px solid var(--el-color-danger-light-7);
  }

  &.el-message--info {
    background: var(--el-color-info-light-9);
    border: 1px solid var(--el-color-info-light-7);
  }
}

// 通知样式
.el-notification {
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

// 加载样式
.el-loading-mask {
  background-color: rgba(255, 255, 255, 0.8);

  .el-loading-spinner {
    .el-loading-text {
      color: var(--el-color-primary);
      font-size: 14px;
    }
  }
}

// 下拉框样式
.el-select {
  .el-select__wrapper {
    border-radius: 4px;
  }
}

.el-select-dropdown {
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

  .el-select-dropdown__item {
    transition: all 0.3s;

    &:hover {
      background: var(--el-fill-color-light);
    }

    &.is-selected {
      color: var(--el-color-primary);
      font-weight: 500;
    }
  }
}

// 树形控件样式
.el-tree {
  .el-tree-node {
    .el-tree-node__content {
      height: auto;
      min-height: 36px;
      line-height: 1.5;
      padding: 6px 8px;
      transition: all 0.3s;
      display: flex;
      align-items: center;

      &:hover {
        background: var(--el-fill-color-light);
      }

      .el-tree-node__label {
        font-size: 14px;
        line-height: 1.5;
        padding: 2px 0;
      }
    }

    &.is-current > .el-tree-node__content {
      background: var(--el-color-primary-light-9);
      color: var(--el-color-primary);
    }
  }
}

// 树选择器样式修复
.el-tree-select {
  .el-select__wrapper {
    border-radius: 4px;
  }

  .el-input__inner {
    height: auto;
    min-height: 32px;
    line-height: 1.5;
  }
}

// 树选择器下拉面板样式
.el-tree-select-popper {
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

  .el-tree {
    .el-tree-node {
      .el-tree-node__content {
        height: auto !important;
        min-height: 32px !important;
        line-height: 1.5 !important;
        padding: 4px 8px !important;

        .el-tree-node__expand-icon,
        .el-tree-node__loading-icon {
          margin-right: 6px;
        }

        .el-tree-node__label {
          font-size: 14px !important;
          line-height: 1.5 !important;
          padding: 2px 0 !important;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }

      // 悬停效果
      &:hover > .el-tree-node__content {
        background-color: var(--el-fill-color-light);
      }

      // 选中效果
      &.is-current > .el-tree-node__content {
        background-color: var(--el-color-primary-light-9);
        color: var(--el-color-primary);
      }
    }
  }
}
